  $borderColor : 1px solid #F2F6FC;
  $op-height :40px;
  //textarea:disabled;
    //background-color #ffffff

                 %scrollbar{
                   &.scroll-style::-webkit-scrollbar{
                     width :6px;
                     background-color: #e5e5e5;
                   }

                   &.scroll-style::-webkit-scrollbar-thumb{
                     background-color: #b7b7b7;
                     border-radius: 4px;
                   }

                   &.scroll-style::-webkit-scrollbar-thumb:hover{
                     background-color: #a1a1a1;

                   }
                   &.scroll-style::-webkit-scrollbar-thumb:active{
                     background-color :#a1a1a1;

                   }
                   &.scroll-style::-webkit-scrollbar-track{
                     -webkit-box-shadow :0 0 0 gray inset;

                   }
                   &.scroll-style-border-radius::-webkit-scrollbar{
                     border-bottom-right-radius :4px;
                   }
                 }


  /* 路由内容 */
  .v-note-wrapper{
    position: relative;
    min-width :300px;
    min-height: 300px;
    display: flex;
    flex-direction :column;
    background-color: #fff;
    z-index :1500;
    text-align :left;
    border: $borderColor;
    border-radius: 4px;
    &.fullscreen
    {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin :0;
      height: auto;
      z-index: 1501;
    }
    .v-note-op
      {
      padding: 1px;
      width :100%;
      display :flex;
      white-space: pre-line;
      flex: none;
      min-height :$op-height;
      user-select :none;
      border-bottom :$borderColor;
      border-radius :4px 4px 0 0;
      background-color: #fff;
      z-index: 1;
      .v-left-item, .v-right-item{
        flex: 1;
        min-height :$op-height;
        box-sizing: border-box;
        .op-icon-divider
         {
          height :$op-height;
          border-left :1px solid #e5e5e5;
          margin: 0 6px 0 4px;}
        .op-icon
        {
          box-sizing: border-box;
          display :inline-block;
          cursor: pointer;
          height :28px;
          width: 28px;
          margin :6px 0 5px 0;
          font-size: 15px;
          padding :4.5px 6px 5px 3.5px;
          color: #757575;
          border-radius :5px;
          text-align :center;
          background: none;
          border: none;
          outline: none;
          line-height :1;
          //vertical-align middle
          &.dropdown-wrapper{
            line-height :18px;

          }
          &.selected{
            color: rgba(0, 0, 0, 0.8);
            background: #eaeaea;
          }

          &:hover{
            color: rgba(0, 0, 0, 0.8);
            background: #e9e9eb;
          }
           }
        &.transition
         { .op-icon
            {transition: all 0.2s linear 0s;}}
      }

      .v-right-item
        {
        text-align: right;
        padding-right: 6px;
        max-width: 30%;}
      .v-left-item
       {
        text-align :left;
        padding-left: 6px;}
    }
    .v-note-panel
    {
      position: relative;
      border-top: none;
      display: flex;
      flex :1;
      width :100%;
      box-sizing: border-box;
      overflow :hidden;
      .v-note-edit.divarea-wrapper{
        flex :0 0 50%;
        width: 50%;
        padding: 0;
        overflow-y :scroll;
        overflow-x :hidden;
        box-sizing: border-box;
        cursor: text;
        border-bottom-left-radius: 4px;
        @extend %scrollbar;
        &.transition{
        transition: all 0.2s linear 0s;

      }
        &.single-edit{
          width :100%;
          flex: 0 0 100%;
          overflow-y: auto;
        }

        &.single-show{
          width: 0;
          flex: 0 0 0;
          display: none;
        }

        .content-div{
          width :100%;
          padding :20px 25px;
          box-sizing :border-box;
          outline: 0 none;
          border: none !important;
          color: #2c3e50;
          font-size: 16px;
        }

        .content-input-wrapper{
          width :100%;
          padding :8px 25px 15px 25px;
        }

      }

      .v-note-show
       {
        flex: 0 0 50%;
        width :50%;
        overflow-y :auto;
        padding :0 0;
        transition :all 0.2s linear 0s;
        &.single-show{
          flex :0 0 100%;
          width :100%;
        }

        .v-show-content, .v-show-content-html{
          width :100%;
          height: 100%;
          padding :8px 25px 15px 25px;
          overflow-y :auto;
          box-sizing :border-box;
          overflow-x :hidden;
        @extend %scrollbar
        }
         }
      .v-note-navigation-wrapper
        {
        display: flex;
        position :absolute;
        width :250px;
        right :0;
        top: 0;
        bottom: 0;
        height :100%;
        flex-direction: column;
        background-color: rgba(255,255,255,0.98);
        border-left: $borderColor;
        border-right :$borderColor;
        &.transition{
          transition: all 0.1s linear 0s;

        }
        //@media only screen and (max-width 768px){
        //  width :50%;
        //  &.slideTop-enter-active, &.slideTop-leave-active
        //  {
        //    height :100%;
        //
        //  }
        //  &.slideTop-enter, &.slideTop-leave-active
        //  {
        //    height: 0;
        //
        //  }
        //  .v-note-navigation-title
        //  {
        //    height :50px;
        //    width :100%;
        //    border-bottom :$borderColor;
        //    flex: none;
        //    line-height:50px;
        //    font-size :16px;
        //    box-sizing :border-box;
        //    padding :0 12px 0 18px;
        //    .v-note-navigation-close{
        //      float: right;
        //      color: #606266;
        //      font-size :18px;
        //      cursor: pointer;
        //    }
        //
        //    &:hover{
        //      color :#303133;
        //    }
        //  }
        //
        //  .v-note-navigation-content {
        //    overflow-y: auto;
        //    flex: 1;
        //    @extend %scrollbar;
        //    padding: 8px 0;
        //
        //    h1, h2, h3, h4, h5, h6 {
        //      margin: 2px 0;
        //      font-weight: 500;
        //      font-size: 17px;
        //      color: #2185d0;
        //      cursor: pointer;
        //      line-height: normal;
        //      overflow: hidden;
        //      text-overflow: ellipsis;
        //      white-space: nowrap;
        //      padding: 0 12px;
        //      border-bottom: none;
        //
        //      &:hover {
        //        color: #483D8B;
        //        text-decoration-line: underline;
        //      }
        //    }
        //
        //    h2 {
        //      padding-left: 27px;
        //      font-size: 17px;
        //    }
        //
        //    h3 {
        //      padding-left: 42px;
        //      font-size: 17px;
        //    }
        //
        //    h4 {
        //      padding-left: 58px;
        //      font-size: 15px;
        //    }
        //
        //    h5 {
        //
        //      padding-left: 72px;
        //      font-size: 15px;
        //    }
        //
        //    h6 {
        //      padding-left: 87px;
        //      font-size: 15px;
        //    }
        //  }
        //}

      }
    }
    .v-note-read-model
      {
      position :relative;
      display: none;
      width :100%;
      height :100%;
      background :#fbfbfb;
      padding :30px 8% 50px 8%;
      overflow-y :auto;
      @extend %scrollbar;
      box-sizing: border-box;
      &.show{
        display: block;
      }
        }
    &.shadow
     { border: none;}
  }

      // box-shadow 0 2px 12px 0 rgba(0, 0, 0, 0.1)
.v-note-help-wrapper
{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background :rgba(0, 0, 0, 0.7);
  z-index :1600;
  transition: all 0.1s linear 0s;
  &.fade-enter-active, &.fade-leave-active
   { opacity: 1;}
  &.fade-enter, &.fade-leave-active
    {opacity: 0;}
  .v-note-help-content
   { position :relative;
    width: 60%;
    max-width: 800px;
    margin: 30px auto;
    height: 90%;
    min-width: 320px;
    transition :all 0.1s linear 0s;
    z-index :3;
    border: $borderColor;
    &.shadow
   {   border :none;
      box-shadow: 0 0 5px rgba(0, 0, 0, .156863), 0 0 5px rgba(0, 0, 0, .227451);}
    i
    {  font-size: 28px;
      position: absolute;
      right :15px;
      top: 8px;
      color: rgba(0, 0, 0, 0.7);
      cursor: pointer;
      &:hover{
        color: rgba(0, 0, 0, 1);

      }
    }
    .v-note-help-show
    {  width: 100%;
      height: 100%;
      font-size: 18px;
      background :#fbfbfb;
      overflow-y :auto;
      padding: 2% 6%;
      @extend %scrollbar
    }
}
}
.v-note-img-wrapper
{
  position:fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  left :0;
  right :0;
  top :0;
  bottom: 0;
  background :rgba(0, 0, 0, 0.7);
  z-index :1600;
  transition :all 0.1s linear 0s;
  &.fade-enter-active, &.fade-leave-active
   { opacity :1;}
  &.fade-enter, &.fade-leave-active
   { opacity :0;}
  img
   { flex: 0 0 auto;
    z-index: 3;
  }
  i
    {font-size :28px;
    position :absolute;
    right :15px;
    top :8px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    &:hover{
      color: rgba(255, 255, 255, 1);

    }
  }

}
